<template>
    <div class="container">
        <headMenu />
        <a-card class="general-card">
            <!--  查询   -->
            <a-row>
                <a-col :flex="1">
                    <!-- <a-form :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
                   
                    </a-form> -->
                </a-col>

                <!-- <a-col :flex="'86px'" style="text-align: right; position: relative; right: 200px">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            {{ $t('searchTable.form.search') }}
                        </a-button>
                        <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            {{ $t('searchTable.form.reset') }}
                        </a-button>
                    </a-space>
                </a-col> -->
            </a-row>
            <a-row style="margin: 16px">
                <a-col :span="16">
                    <a-space>
                        <a-button type="primary" @click="updateAndAdd(undefined)">
                            <template #icon>
                                <icon-plus />
                            </template>
                            {{ $t('searchTable.operation.create') }}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <!--  渲染数据  -->
            <a-spin :loading="loading" tip="This may take a while..." style="width: 100%">
                <a-table row-key="urId" :bordered="false" :data="data" @selection-change="selectionChange"
                    style="margin-top: 30px" :pagination="false" :hoverable="true">
                    <template #columns>

                        <a-table-column data-index="tnId" title="主键">
                        </a-table-column>
                        <a-table-column data-index="tnTitle" title="标题">
                        </a-table-column>
                        <a-table-column data-index="tnContent" title="内容">
                        </a-table-column>
                        <a-table-column data-index="tnType" title="类型">
                            <template #cell="{ record }">
                                {{ record.tnType == 1 ? "通知" : record.tnType == 2 ? "消息" : "代办" }}
                            </template>
                        </a-table-column>
                        <a-table-column data-index="tnUrId" title="代办人">
                            <template #cell="{ record }">
                             <div>

                                <a-avatar>
                                    <img alt="avatar" :src="record.imgUrl" />
                                </a-avatar>
                                <div>
                                    <a-tag checkable color="arcoblue" :default-checked="true">{{ record.nickName }}</a-tag>
                                </div>
                             </div>

                            </template>
                        </a-table-column>
                        <a-table-column data-index="tnStats" title="状态">
                            <template #cell="{ record }">
                                {{ record.tnStats == 1 ? "未读" : "已读" }}
                            </template>
                        </a-table-column>
                        <a-table-column data-index="tnBehavior" title="代办状态">
                            <template #cell="{ record }">
                                {{ record.tnBehavior == 1 ? "未开始" : record.tnBehavior == 2 ? "已完成" : record.tnBehavior == 3
                                    ? "进行中" : "伪状态" }}
                            </template>
                        </a-table-column>
                        <!-- <a-table-column data-index="tnUr" title="创建人">
                        </a-table-column> -->
                        <a-table-column data-index="tnTime" title="创建时间">
                        </a-table-column>
                        <!-- <a-table-column title="修改">
                            <template #cell="{ record }">
                                <a-button @click="updateAndAdd(record.tnId)" type="outline">编辑</a-button>
                            </template>
                        </a-table-column> -->

                        <a-table-column title="删除">
                            <template #cell="{ record }">
                                <a-popconfirm @ok="submitDelete(record.tnId)" content="Are you sure you want to delete?">
                                    <a-button>
                                        <template #icon>
                                            <icon-delete />
                                        </template>
                                    </a-button>
                                </a-popconfirm>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
                <a-modal :visible="ediVisible" @ok="handleSubmit" @cancel="handleCancel" width="500">
                    <template #title>{{ form.tnId ? '编辑' : '添加' }}</template>
                    <div>
                        <a-form :model="form" :style="{ width: '100%' }">
                            <a-table-column data-index="tnTitle" title="标题">
                            </a-table-column>

                            <a-form-item field="tnTitle" label="标题">
                                <a-input v-model="form.tnTitle" placeholder="请输入tnTitle" />
                            </a-form-item>
                            <a-table-column data-index="tnContent" title="内容">
                            </a-table-column>

                            <a-form-item field="tnContent" label="内容">
                                <a-input v-model="form.tnContent" placeholder="请输入tnContent" />
                            </a-form-item>
                            <a-table-column data-index="tnType" title="类型：">
                            </a-table-column>

                            <a-form-item field="tnType" label="类型：">
                                <!-- <a-input v-model="form.tnType" placeholder="请输入tnType" /> -->
                                <a-select v-model="form.tnType" :style="{ width: '320px' }" placeholder="Please select ...">
                                    <a-option :value="1">通知</a-option>
                                    <a-option :value="2">消息</a-option>
                                    <a-option :value="3">代办</a-option>
                                </a-select>
                            </a-form-item>
                            <a-table-column data-index="tnUrId" title="代办人">
                            </a-table-column>

                            <a-form-item field="tnUrId" label="代办人">
                                <!-- <a-input v-model="form.tnUrId" placeholder="请输入tnUrId" /> -->
                                <!-- <a-select :style="{ width: '320px' }" placeholder="Please select ...">
                                    <a-option v-for="item in adminList" :value="item.urId">{{ item.urName }}</a-option>
                                </a-select> -->

                                <a-dropdown v-model="form.tnUrId" @select="selectTurId">
                                    <a-button>选择代办人</a-button>
                                    <a-avatar v-if="form.urAvatar">
                                        <img alt="avatar" :src="form.urAvatar" />
                                        <!-- <template #trigger-icon>
                                            {{ form.urUsername }}
                                        </template> -->
                                    </a-avatar>
                                    <template #content>
                                        <a-doption v-for="item in adminList" :value="item.urId">
                                            <template #icon>
                                                <a-avatar>
                                                    <img alt="avatar" :src="item.urAvatar" />
                                                </a-avatar>
                                            </template>
                                            <template #default>{{ item.urName }}</template>
                                        </a-doption>
                                    </template>
                                </a-dropdown>

                            </a-form-item>
                            <!-- <a-table-column data-index="tnStats" title="状态：1.未读">
                            </a-table-column> -->

                            <!-- <a-form-item field="tnStats" label="状态：1.未读">
                                <a-input v-model="form.tnStats" placeholder="请输入tnStats" />
                            </a-form-item>
                            <a-table-column data-index="tnBehavior" title="代办状态：1.代办">
                            </a-table-column> -->

                            <!-- <a-form-item field="tnBehavior" label="代办状态：1.代办">
                                <a-input v-model="form.tnBehavior" placeholder="请输入tnBehavior" />
                            </a-form-item>
                            <a-table-column data-index="tnUr" title="创建人">
                            </a-table-column> -->

                            <!-- <a-form-item field="tnUr" label="创建人">
                                <a-input v-model="form.tnUr" placeholder="请输入tnUr" />
                            </a-form-item>
                            <a-table-column data-index="tnTime" title="创建时间">
                            </a-table-column>

                            <a-form-item field="tnTime" label="创建时间">
                                <a-input v-model="form.tnTime" placeholder="请输入tnTime" />
                            </a-form-item> -->
                        </a-form>
                    </div>
                </a-modal>

                <!--  分页  -->
                <a-pagination :total="pageData.totalCount" show-jumper show-page-size show-total show-current
                    :current="pageData.page" :page-size="pageData.pageSize" :page-size-options="[2, 10, 20, 50, 100]"
                    @change="changePage" @page-size-change="limitChange" />
            </a-spin>
        </a-card>
    </div>
</template>

<script>
import api from '@/api/tNotice/index';
import admin from '@/api/sys/admin';
import headMenu from '@/components/headMenu/headMenu.vue';
export default {
    components: { headMenu },
    data() {
        return {
            form: {},
            loading: true,
            deleteIds: [],
            ediVisible: false,
            menusName: this.$router.currentRoute.value.meta.locale,
            pageData: {
                id: '',
                name: '',
                createTime: '',
                endTiem: '',
                status: '',
                page:1,
                pageSize: 10,
                totalCount: 0,
                pages: 0,
            },
            adminList: [],
            data: [],
        };
    },

    methods: {
        selectTurId(e) {
            this.form.tnUrId = e
            var obj = this.adminList.find(i => i.urId === e)
            this.form.urAvatar = obj.urAvatar
            this.form.urUsername = obj.urUsername
        },
        /**
         * 取消弹窗
         */
        handleCancel() {
            this.ediVisible = false;
            this.form = {};
        },

        /**
         * 提交判断是添加还是删除
         */
        handleSubmit() {
            if (this.form.tnId !== undefined) {
                this.updateSubmit();
            } else {
                this.addSumeit();
            }
        },

        /**
         * 提交修改
         */
        updateSubmit() {
            api.updateAdd(this.form).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('修改成功!');
                    this.reset();
                    this.form = {};
                } else {
                    this.$notification.error('修改失败!');
                }
            });
        },

        /**
         *  添加提交
         */
        addSumeit() {
            api.updateAdd(this.form).then((res) => {
                if (res.data.code === 200) {
                    //添加成功
                    this.$notification.success('添加成功!');
                    this.reset();
                    this.ediVisible = false;
                    this.form = {};
                } else {
                    this.$notification.error('添加失败!');
                }
            });
        },
        /**
         * 新添加的方法
         */
        addInfo() {
            this.ediVisible = true;
        },

        /**
         * 判断当前的修改还是添加
         */
        updateAndAdd(id) {
            if (id !== undefined) {
                this.updateInfo(id);
            } else {
                this.addInfo();
            }
        },

        /**
         * 修改前先查询id
         */
        updateInfo(Id) {
            this.loading = true;
            api.info(Id).then((res) => {
                this.form = res.data.data.data;
                this.ediVisible = true;
                this.loading = false;
            });
        },

        /**
         * 删除选中的方法
         */
        subitmDeleteIds() {
            api.delete(this.deleteIds).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('删除成功!');
                    this.reset();
                } else {
                    this.$notification.error('删除失败!');
                }
            });
        },
        /**
         * 查询数据
         */
        search() {

            //发送请求
            this.getList();
        },
        /**
         *  刷新查询的数据
         */
        reset() {
            this.ediVisible = false;
            this.pageData = {
                id: '',
                name: '',
                createTime: '',
                endTime: '',
                status: '',
                page: '1',
                pageSize: 10,
                totalCount: 0,
                pages: 0,
            };
            this.getList();
        },

        /**
         *  选中
         */
        selectionChange(data) {
            this.deleteIds = data;
        },
        /**
         *  选择页码
         */
        changePage(currPage) {
            this.pageData.page = currPage;
            this.getList();
        },
        //选择分页大小
        limitChange(pageSize) {
            this.pageData.pageSize = pageSize;
            this.getList();
        },

        /**
         *  获取当前数据
         */
        getList() {
            this.loading = true;
            api.list(this.pageData).then((res) => {
                const page = res.data.data;
                this.data = page.list;
                this.pageData.page = page.page >= page.pages ? page.pages : page.page;
                this.pageData.pageSize = page.pageSize;
                this.pageData.totalCount = page.counts;
                this.pageData.pages = page.pages;
                this.loading = false;
            });
        },
        /**
         *  删除账号
         */
        submitDelete(id) {
            let data = [];
            data.push(id);
            api.delete(data).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('删除成功!');
                    this.reset();
                } else {
                    this.$notification.error('删除失败!');
                }
            });
        },
    },
    created() {
        this.getList();
        admin.getListAll().then(({ data }) => {
            this.adminList = data.data.list
        })
    },
};
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
    &:last-child {
        .arco-table-th-item-title {
            margin-left: 16px;
        }
    }
}
</style>
